@import "@/@CORE/scss/base/core/_varibales.scss";

.vertical-layout {
  @apply select-none h-full w-full;

  .vertical-layout-header {
    height: $navbar-height;
    @apply flex items-center justify-between w-full z-50 bg-white;
    @apply shadow-xl;

    &.sticky_ {
      @apply sticky top-0;
      & + .content {
        @apply pt-20;
      }
    }

    &.static_ {
      @apply static;
    }

    &.floating_ {
      @apply fixed top-2 rounded-xl z-50 h-20;
      width: calc(100vw - (100vw - 100%) - calc(2rem * 2) - $menu-expanded-width);
      margin: 1rem 2rem 0;
      min-height: 4.5rem;
      & + .content {
        padding: calc(2rem + 4.45rem + 1.3rem) 2rem 0;
        .card__content--full {
          height: calc(100vh - 4.5rem - 2rem - 2rem - 1.3rem);
          min-height: 700px;
          @apply mt-2;
          @apply shadow-2xl shadow-neutral-400 bg-white p-5 rounded-2xl;
        }
      }

    }

    &.hidden_ {
      @apply hidden;
    }
  }

  .vertical-layout-container {
    .vertical-layout-menu-container {
      width: $menu-expanded-width;
      @apply h-full overflow-hidden bg-white fixed left-0 z-50;
      @apply shadow-2xl shadow-neutral-400 border-0 ;


      :deep(.el-menu.el-menu--vertical) {
        @apply border-0 w-full;
      }
    }

    .vertical-layout-content-container {
      @apply h-full p-0 fixed  overflow-hidden;
      left: $menu-expanded-width;
      width: calc(100% - #{$menu-expanded-width});
    }

    :deep(.layout-vertical-menu-header-group) {
      .more-horiz {
        color: #a6a4b0;
        @apply hidden;
      }
    }
  }

  &.isCollapsed {
    .vertical-layout-container {
      .vertical-layout-menu-container {
        width: $menu-collapsed-width;
        transition: width 0.3s ease-in-out;

        :deep(li) {
          width: inherit;

          .el-menu-item-group__title {
            @apply p-0 mt-2 mb-2 w-full flex items-center justify-center;
          }

          &.el-sub-menu,
          &.el-menu-item {
            > div {
              width: inherit;
              padding: 0 0.5rem;
              @apply flex items-center justify-center;
              .el-submenu__title {
                padding: 0;
                width: inherit;

                .el-submenu__icon-arrow {
                  display: none;
                }
              }
            }
          }
        }

      }

      .vertical-layout-content-container {
        left: $menu-collapsed-width;
        width: calc(100% - #{$menu-collapsed-width});
      }
    }
    :deep(.layout-vertical-menu-header-group) {
      .layout-vertical-menu-header-title {
        display: none;
      }

      .more-horiz {
        color: #a6a4b0;
        @apply block;
      }
    }

    .vertical-layout-header.floating_ {
      transition: unset !important;
        width: calc(100vw - (100vw - 100%) - calc(2rem * 2) - $menu-collapsed-width);
    }
  }


}